<template>
  <div class="login">
    <div class="login-con">
      <!-- 顶部切换 -->
      <ul class="menu-tab">
        <li
          v-for="item in menuData"
          :key="item.type"
          :class="{ current: item.current }"
          @click="clickMenu(item)"
        >
          {{ item.txt }}
        </li>
      </ul>
      <!-- 表单部分 -->
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <!-- 邮箱 -->
        <el-form-item prop="username">
          <label>邮箱</label>
          <el-input
            v-model="ruleForm.username"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <label>密码</label>
          <el-input
            v-model="ruleForm.password"
            type="password"
            autocomplete="off"
            minlength="6"
            maxlength="15"
          />
        </el-form-item>

        <!-- 重复密码 -->
        <el-form-item prop="passwords" v-show="model === 'register'">
          <label>重复密码</label>
          <el-input
            v-model="ruleForm.passwords"
            minlength="6"
            maxlength="15"
            type="password"
          />
        </el-form-item>

        <!--提交按钮 -->
        <el-form-item>
          <el-button
            @click="submitForm(ruleFormRef)"
            type="danger"
            class="login-btn block"
            :disabled="btnbool"
            >{{ model === "login" ? "登录" : "注册" }}</el-button>
        </el-form-item>
      </el-form>
      <!-- 表单部分 -->
    </div>
  </div>
</template>
<script lang="ts" setup>
import type { FormInstance } from "element-plus";
import { reactive, ref, onMounted, watch } from "vue";

import { useRouter } from "vue-router";

import { ElMessage } from "element-plus";

import link from "../../api/Link";
// 验证邮箱规则
import * as verification from "../../util/verification";

/**
 * 创建变量
 */

const router = useRouter();

const menuData = reactive([
  { txt: "登录", current: true, type: "login" },
  { txt: "注册", current: false, type: "register" },
]);
const model = ref("login");

// 声明函数
// 切换模块
const clickMenu = (data: any) => {
  menuData.forEach((elem) => {
    elem.current = false;
  });
  // 高光
  data.current = true;
  // 修改模块值
  model.value = data.type;
};

const ruleFormRef = ref<FormInstance>();

// 验证邮箱
const checkEmail = (rule: any, value: any, callback: any) => {
  // 创建邮箱正则来进行邮箱格式校验
  // let reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
  if (!value) {
    return callback(new Error("邮箱不能为空！！"));
    // 调用验证（注意删掉之前的取反）
  } else if (verification.verificationEmail(value)) {
    return callback(new Error("邮箱格式有误！！"));
  } else {
    callback();
  }
};

// 验证密码
const validatePass = (rule: any, value: any, callback: any) => {
  // let reg = /^(?!\D+$)(?![^a-zA-Z]+$)\S{6,15}$/;// 验证密码 6至15位的字母+数字
  if (value === "") {
    callback(new Error("密码不能为空"));
    // 调用验证
  } else if (verification.verificationPwd(value)) {
    callback(new Error("密码格式有误!6至15位的字母+数字"));
  } else {
    callback();
  }
};

// 第二次输入密码验证
const validatePass2 = (rule: any, value: any, callback: any) => {
  // 因为登录没有重复密码 所以在登录的时候跳过
  if (model.value === "login") {
    callback();
  }
  if (value === "") {
    callback(new Error("重复密码不能为空"));
  } else if (value !== ruleForm.password) {
    callback(new Error("两次密码必须相同"));
  } else {
    callback();
  }
};

const ruleForm = reactive({
  username: "",
  password: "",
  passwords: "",
  pass: "",
  checkPass: "",
  age: "",
});
const rules = reactive({
  pass: [{ validator: validatePass, trigger: "blur" }],
  checkPass: [{ validator: validatePass2, trigger: "blur" }],
  email: [{ validator: checkEmail, trigger: "blur" }],
});



const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.resetFields();
};
let btnbool = ref(true);
watch(ruleForm, (newval) => {
  console.log(newval);

  // 判断是登录还是注册
  if (model.value === "login") {
    if (newval.username != "" && newval.password != "") {
      btnbool.value = false;
    } else {
      btnbool.value = true;
    }
  } else {
    if (
      newval.username != "" &&
      newval.password != "" &&
      newval.passwords != ""
    ) {
      btnbool.value = false;
    } else {
      btnbool.value = true;
    }
  }
});

// 发送请求
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      // 判断是登录还是注册
      if (model.value === "login") {
        console.log("登录");
        link(`/register?uname=${ruleForm.username}&pwd=${ruleForm.password}`,"get").then((ok:any)=>{
          // console.log(ok)
          let {data}=ok;//解构出数据
          // 判断data长度不为0登录成功
          if(data.length!=0){
            console.log("登录成功")
          }else{
            console.log("登录失败")
          }
        })
      } else {
        // 把要发送的数据拼装成一个对象
        let data = {
          uname: ruleForm.username,
          pwd: ruleForm.password,
        };

        link("/register", "POST", data).then((ok:any) => {
          ElMessage.error("注册失败");
          // 判断数据是否为空 不为空表示注册成功
          let { data } = ok;
          // 转成成数组判断长度即可知道对象是否为空
          if (Object.keys(data).length !== 0) {
            ElMessage("注册成功");

            // 注册成功 把输入框的内容切换到登录
            model.value="login"
              // 先把所有的的控制切换的变量变成false
              menuData.forEach((elem) => {
                elem.current = false;
              });
              // 在把登录的变为true
              menuData[0].current=true;
          } else {
            ElMessage.error("注册失败");
          }
        });
      }
    } 
  });
};
onMounted(() => {
  console.log(123, process.env.VUE_APP_API);
});
</script>
<style lang="scss">
.login {
  background-color: #a1a1d0; //深蓝色
  height: 100%;
}
html,
body,
#app {
  //设置页面100%高
  height: 100%;
}
// 设置切换样式开始
.login-wrap {
  width: 330px;
  margin: auto;
}
.menu-tab {
  text-align: center;
  li {
    display: inline-block;
    width: 88px;
    line-height: 36px;
    font-size: 14px;
    color: #fff;
    border-radius: 2px;
    cursor: pointer;
  }
  .current {
    background-color: rgba(255, 255, 255, 0.5); //白色半透明
  }
}
// 设置切换样式结束
</style>
